<template>
  <div  >
    myDialog
    <el-button type='primary' @click='visible=true' @close='close'>show</el-button>
    <el-dialog title='dialog' :visible.sync='visible' style = "overflow: hidden">
      <el-input type = "text" v-model = "search" style = "width:220px;flex:1;overflow-y: auto" placeholder = "please input" />
      <div v-for = "item in 10">
        <el-descriptions title="用户信息">
          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-tag size="small">学校</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
        </el-descriptions>

      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'myDialog',
  data() {
    return {
      data: [
        {
          'id': 23,
          'eventId': 101,
          'eventName': '超速报警',
          'peripheralId': 104,
          'peripheralCode': null,
          'peripheralName': '违规报警',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': '',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },

        {
          'id': 2,
          'eventId': 316,
          'eventName': '车道偏离报警',
          'peripheralId': 100,
          'peripheralCode': 'ADAS',
          'peripheralName': '高级驾驶辅助系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'rd',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 13,
          'eventId': 327,
          'eventName': '分神驾驶报警',
          'peripheralId': 101,
          'peripheralCode': 'DSM',
          'peripheralName': '驾驶员状态监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'am',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 3,
          'eventId': 317,
          'eventName': '车距过近报警',
          'peripheralId': 100,
          'peripheralCode': 'ADAS',
          'peripheralName': '高级驾驶辅助系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'jj',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 4,
          'eventId': 318,
          'eventName': '行人碰撞报警',
          'peripheralId': 100,
          'peripheralCode': 'ADAS',
          'peripheralName': '高级驾驶辅助系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'pc',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 5,
          'eventId': 319,
          'eventName': '频繁变道报警',
          'peripheralId': 100,
          'peripheralCode': 'ADAS',
          'peripheralName': '高级驾驶辅助系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'fr',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 6,
          'eventId': 320,
          'eventName': '道路标识超限报警',
          'peripheralId': 100,
          'peripheralCode': 'ADAS',
          'peripheralName': '高级驾驶辅助系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'fl\t',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 7,
          'eventId': 321,
          'eventName': '障碍物报警 ',
          'peripheralId': 100,
          'peripheralCode': 'ADAS',
          'peripheralName': '高级驾驶辅助系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'br',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 10,
          'eventId': 324,
          'eventName': '疲劳驾驶报警',
          'peripheralId': 101,
          'peripheralCode': 'DSM',
          'peripheralName': '驾驶员状态监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'fd',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 11,
          'eventId': 325,
          'eventName': '接打电话报警',
          'peripheralId': 101,
          'peripheralCode': 'DSM',
          'peripheralName': '驾驶员状态监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'pp',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 12,
          'eventId': 326,
          'eventName': '抽烟报警',
          'peripheralId': 101,
          'peripheralCode': 'DSM',
          'peripheralName': '驾驶员状态监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'sm',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },

        {
          'id': 14,
          'eventId': 328,
          'eventName': '驾驶员异常报警',
          'peripheralId': 101,
          'peripheralCode': 'DSM',
          'peripheralName': '驾驶员状态监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'de',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 19,
          'eventId': 331,
          'eventName': '胎压监测报警',
          'peripheralId': 102,
          'peripheralCode': 'TPMS',
          'peripheralName': '胎压监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'th,tl,tt,se,tb,al',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 20,
          'eventId': 332,
          'eventName': '后方接近报警',
          'peripheralId': 103,
          'peripheralCode': 'BSD',
          'peripheralName': '盲区监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'bn',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 21,
          'eventId': 333,
          'eventName': '左侧后方接近报警',
          'peripheralId': 103,
          'peripheralCode': 'BSD',
          'peripheralName': '盲区监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'lbn',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 22,
          'eventId': 334,
          'eventName': '右侧后方接近报警',
          'peripheralId': 103,
          'peripheralCode': 'BSD',
          'peripheralName': '盲区监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'rbn',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 17,
          'eventId': 400,
          'eventName': '驾驶员分神驾驶报警',
          'peripheralId': 101,
          'peripheralCode': 'DSM',
          'peripheralName': '驾驶员状态监测系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'am',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        },
        {
          'id': 1,
          'eventId': 315,
          'eventName': '前向碰撞报警',
          'peripheralId': 100,
          'peripheralCode': 'ADAS',
          'peripheralName': '高级驾驶辅助系统',
          'eventState': 1,
          'comeFrom': 2,
          'type': 0,
          'eventLevel': 2,
          'qcTypeId': 'fc',
          'statusCode': 1,
          'createBy': null,
          'createTime': null,
          'updateBy': null,
          'updateTime': null
        }
      ],
      result: undefined,
      visible: false,
      search:undefined ,
    }
  },
  created() {
    //this.init()
  },
  methods: {
    init() {

      let sortArr = []
      let count = 0
      let flag = -1
      debugger
      // 根据peripheralId 升序
      sortArr = this.data.sort((x, y) => {
        return x.peripheralId - y.peripheralId
      })

      flag = sortArr[0].peripheralId

      this.result[count] = []

      // 根据peripheralId进行分类
      sortArr.forEach(item => {

        if (item.peripheralId === flag) {
          this.result[count].push(item)
        } else {
          this.result[++count] = []
          this.result[count].push(item)
          flag = item.peripheralId
        }
      })
      this.result = JSON.parse(JSON.stringify(this.result))
      console.log(this.result)

      this.visible = true
    },
    show() {
      this.visible = true
    },
    close() {
      this.$emit('update:visible', false)
      this.$emit('close', close)
    }
  }
}
</script>

<style scoped>
.block {
  border: 1px solid #d9d9d9;
}

</style>
